<script src="__JS__/jquery.jplayer.min.js"></script>
<div class="video rf" id="video111"> <!--container for everything-->
    <div class="close"><a href="javascript:;"><img src="__IMG__/close.png"></a></div>
    <script>
        $(function() {
            $('#video111').click(function() {
                $('#video111').hide();
            });
        });
    </script>
    <div id="jp_container_1" class="jp-video jp-video-360p">

        <!--container in which our video will be played-->
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <!--main containers for our controls-->
        <div class="jp-gui">
            <div class="jp-interface">
                <div class="jp-controls-holder">

                    <!--play and pause buttons-->
                    <a href="javascript:;" class="jp-play" tabindex="1">play</a>
                    <a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
                    <span class="separator sep-1"></span>

                    <!--progress bar-->
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"><span></span></div>
                        </div>
                    </div>

                    <!--time notifications-->
                    <div class="jp-current-time"></div>
                    <span class="time-sep">/</span>
                    <div class="jp-duration"></div>
                    <span class="separator sep-2"></span>

                    <!--mute / unmute toggle-->
                    <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
                    <a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>

                    <!--volume bar-->
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"><span class="handle"></span></div>
                    </div>
                    <span class="separator sep-2"></span>

                    <!--full screen toggle-->
                    <a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a>
                    <a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a>

                </div><!--end jp-controls-holder-->
            </div><!--end jp-interface-->
        </div><!--end jp-gui-->

        <!--unsupported message-->
        <div class="jp-no-solution">
            <span>Update Required</span>
            Here's a message which will appear if the video isn't supported. A Flash alternative can be used here if you fancy it.
        </div>

    </div><!--end jp_container_1-->
</div>
<!--instantiate-->
<script type="text/javascript">
    $(document).ready(function(){

        $("#jquery_jplayer_1").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    m4v: "mi4.m4v",
                    ogv: "mi4.ogv",
                    mp4: "mi4.mp4",
                    webmv: "mi4.webm",
                    poster: "mi4.png"
                });
            },
            swfPath: "js",
            supplied: "webmv, ogv, m4v",
            size: {
                width: "300px",
                height: "169px",
                cssClass: "jp-video-360p"
            }
        });

    });
</script>
<script src="__JS__/aos.js" type="text/javascript"></script>
<script type="text/javascript">
    AOS.init({
        easing: 'ease-out-back',
        duration: 1000
    });
</script>